<template>
  <div class="list" ref="wrapper">
  <div class="commont">
  <div class="area">
    <div class="title border-topbottom">当前城市</div>
    <div class="button-list">
        <div class="button-wrapper">
          <div class="button">{{this.currentCity}}</div>
        </div>
    </div>
  </div>
  <div class="area">
    <div class="title border-topbottom">热门城市</div>
    <div class="button-list">
        <div class="button-wrapper"
        v-for="item of hot"
        :key="item.id"
        @click="handleCityClick(item.name)"
        >
          <div class="button">{{item.name}}</div>
        </div>
    </div>
  </div>
  <div class="area" v-for="(item,key) of cities"  :key="key"  :ref="key">    <div class="title border-topbottom">{{key}}</div>
    <div class="item-list">
      <div class="item border-bottom"
      v-for="innerItem of item"
      :key="innerItem.id"
      @click="handleCityClick(innerItem.name)"
      >{{innerItem.name}}
      </div>
    </div>
  </div>
  </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {mapState,mapMutations} from 'vuex'
  export default {
    name: 'CityList',
    props:{
      hot:Array,
      cities:Object,
      letter:String
    },
    computed:{
      ...mapState({
        currentCity:'city'
      }),
    },
    methods:{
      handleCityClick(city){
        // this.$store.dispatch('changeCity',city)
        // this.$store.commit('changeCity',city)
        this.changeCity(city)
        /* this.$router.push('/').catch(err =>{console.log(err)}) */
        this.$router.push('/')
      },
      Refresh(){
        this.scroll.refresh();
      },
      ...mapMutations(['changeCity'])
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper,{
        click:true
      })
    },  
    updated() {
      console.log("updated")
      this.scroll.refresh();
/*      this.scroll = new BScroll(this.$refs.wrapper,{
        click:true
      }) */
    },
    watch:{
      letter(){        if(this.letter){
          console.log(this.letter)
          const element = this.$refs[this.letter][0]
          this.scroll.scrollToElement(element)
        }
      }    },
    activated() {
      window.addEventListener('this.$refs.wrapper',this.Refresh())
    },
    deactivated() {
      window.removeEventListener('this.$refs.wrapper',this.Refresh())
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .title{
    line-height :.54rem;
    background :#eee;
    padding-left :.2rem;
    color:#666;
    font-size :.26rem;
  }
    .list{
      overflow :hidden;
      position :absolute;
      top:1.58rem;
      left:0;
      right :0;
      bottom :0;
    }
  .button-list{
    overflow :hidden;
    padding :.1rem .6rem .1rem .1rem;
  }
  .button-wrapper{
    float :left;
    width :33.33%;
  }
  .button{
    padding :.1rem 0;
    margin :.1rem;
    text-align :center;
    border :.02rem solid #ccc;
    border-radius :.06rem;
  }
  .item-list{

  }
  .item{
    line-height :.76rem;
    padding-left :.2rem;
  }
  .border-bottom
    &:before
      border-color: #ccc
  .border-topbottom
    &:before
      border-color: #ccc
    &:after
      border-color: #ccc
</style>
